<template>
	<div class="app-container home">
		<div style="width: 50%;float: left;height: 1050px;">
			<el-row :gutter="23">
				<el-col :span="8">
					<el-card shadow="never">
						<div class="pending">
							<img src="../../public/img/allperson.png" />
							<div class="pendtext">
								<p class="text">全部人员</p>
								<h1 class="num">{{ personnum.personAllCount }}</h1>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="never">
						<div class="pending">
							<img src="../../public/img/leave.png" />
							<div class="pendtext">
								<p class="text">请假人员</p>
								<h1 class="num">{{ personnum.askPersonCount }}</h1>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="never">
						<div class="pending">
							<img src="../../public/img/ls.png" />
							<div class="pendtext">
								<p class="text">临时人员</p>
								<h1 class="num">{{ personnum.temporaryPersonCount }}</h1>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
			<div style="margin-top: 10px;background: #fff;height: 450px;padding: 10px 10px 0;overflow-y: auto;">
				<p class="cartitle"><span>人员请假记录</span></p>
				<el-table v-loading="loading" :data="askList">
					<el-table-column label="姓名" align="center" prop="zhmkPerson.userName" />
					<el-table-column label="人员状态" align="center" prop="userType" :formatter="userTypeFormat" />
					<el-table-column label="请假状态" align="center" prop="status" :formatter="statusFormat" />
					<el-table-column label="请假开始时间" align="center" prop="askStartDate">
						<template slot-scope="scope">
							<span>{{ scope.row.askStartDate }}</span>
						</template>
					</el-table-column>
					<el-table-column label="请假结束时间" align="center" prop="askEndDate">
						<template slot-scope="scope">
							<span>{{ scope.row.askEndDate }}</span>
						</template>
					</el-table-column>
					<el-table-column label="审核人" align="center" prop="auditor" />
					<el-table-column label="请假事由" align="center" prop="reasons" width="150" :show-overflow-tooltip='true'/>
				</el-table>
				<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize" @pagination="getList" />
			</div>
			<div style="margin-top: 10px;background: #fff;height: 450px;padding: 10px 10px 0;overflow-y: auto;">
				<p class="cartitle"><span>待办事项</span></p>
				<el-table v-loading="loading2" :data="askList2">
					<el-table-column label="姓名" align="center" prop="zhmkPerson.userName" />
					<el-table-column label="人员状态" align="center" prop="userType" :formatter="userTypeFormat" />
					<el-table-column label="请假开始时间" align="center" prop="askStartDate">
						<template slot-scope="scope">
							<span>{{ scope.row.askStartDate }}</span>
						</template>
					</el-table-column>
					<el-table-column label="请假结束时间" align="center" prop="askEndDate">
						<template slot-scope="scope">
							<span>{{ scope.row.askEndDate }}</span>
						</template>
					</el-table-column>
					<el-table-column label="请假事由" align="center" prop="reasons" :show-overflow-tooltip='true' />
					<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
						<template slot-scope="scope">
							<el-button size="mini" type="text" icon="el-icon-delete" @click="examine(scope.row)">审核
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<pagination v-show="total2>0" :total="total2" :page.sync="queryParams2.pageNum"
					:limit.sync="queryParams2.pageSize" @pagination="getList2" />
			</div>
			<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
				<el-form ref="form1" :model="form1" label-width="80px">
					<el-form-item label="人员" prop="userId">
						<el-select v-model="form1.userId" placeholder="请选择">
							<el-option v-for="item in personlist" :key="item.id" :label="item.userName"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="开始时间" prop="askStartDate">
						<el-date-picker clearable size="small" v-model="form1.askStartDate" type="datetime"
							value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择请假开始时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="结束时间" prop="askEndDate">
						<el-date-picker clearable size="small" v-model="form1.askEndDate" type="datetime"
							value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择请假结束时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="请假事由" prop="reasons">
						<el-input v-model="form1.reasons" type="textarea" placeholder="请输入内容" />
					</el-form-item>
					<el-form-item label="审核">
						<el-radio v-model="status" label="2">通过</el-radio>
						<el-radio v-model="status" label="3">不通过</el-radio>
						<el-radio v-if="show" v-model="status" label="1">移交</el-radio>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</el-dialog>
		</div>
		<div style="width: 49%;display: inline-block;height: 1050px;margin-left: 1%;">
			<el-row :gutter="23">
				<el-col :span="8">
					<el-card shadow="never">
						<div class="pending">
							<img src="../../public/img/allcar.png" />
							<div class="pendtext">
								<p class="text">全部车辆</p>
								<h1 class="num">{{ carnum.carAllCount }}</h1>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="never">
						<div class="pending">
							<img src="../../public/img/czcar.png" />
							<div class="pendtext">
								<p class="text">常驻车辆</p>
								<h1 class="num">{{ carnum.permanentCarCount }}</h1>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="never">
						<div class="pending">
							<img src="../../public/img/lscar.png" />
							<div class="pendtext">
								<p class="text">临时车辆</p>
								<h1 class="num">{{ carnum.temporaryCarCount }}</h1>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
			<div style="margin-top: 10px;background: #fff;height: 450px;padding: 10px 10px 0;overflow-y: auto;">
				<p class="cartitle"><span>车辆进出记录</span></p>
				<el-table v-loading="loading1" :data="carInfoList">
					<el-table-column type="selection" width="55" align="center" />
					<el-table-column label="车辆类型" align="center" prop="carType" :formatter="carTypeFormat" />
					<el-table-column label="车牌号码" align="center" prop="plateNumber" />
					<el-table-column label="进出门位置" align="center" prop="outdoorSite" />
					<el-table-column label="审核人" align="center" prop="checkUserName" />
					<el-table-column label="进出类型" align="center" prop="inoutType" :formatter="inoutTypeFormat" />
					<el-table-column label="创建时间" align="center" prop="createTime" />
				</el-table>

				<pagination v-show="total1>0" :total="total1" :page.sync="queryParams1.pageNum"
					:limit.sync="queryParams1.pageSize" @pagination="getList1" />
			</div>
			<div style="margin-top: 10px;background: #fff;height: 450px;padding: 10px 10px 0;overflow-y: auto;">
				<p class="cartitle"><span>远程开门</span></p>
				<el-table v-loading="loading3" :data="deviceList">
					<el-table-column label="设备名称" align="center" prop="deviceName" />
					<el-table-column label="设备位置" align="center" prop="devicePosition" />
					<el-table-column label="IP地址" align="center" prop="ip" />
					<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
						<template slot-scope="scope">
							<el-button
								size="mini"
								type="text"
								icon="el-icon-edit"
								@click="opendoor(scope.row)"
							>开门</el-button>
						</template>
					</el-table-column>
				</el-table>
				<pagination v-show="total3>0" :total="total3" :page.sync="queryParams3.pageNum"
					:limit.sync="queryParams3.pageSize" @pagination="getList3" />
			</div>
		</div>

		<div style="background: #fff;height: 330px;">
			<p class="cartitle"><span>人员车辆信息</span></p>
			<div style="position: relative;">
				<div style="position: absolute;top: 5px;left: 20px;z-index: 10;">
					<el-form ref="form" :model="form" label-width="80px" :inline="true">
						<el-form-item label="查询对象">
							<el-select v-model="form.type" clearable placeholder="请选择">
								<el-option label="人员" value="0"></el-option>
								<el-option label="车辆" value="1"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="月份">
							<el-date-picker v-model="form.dateTime" type="month" value-format="yyyy-MM" placeholder="选择月">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit">搜索</el-button>
						</el-form-item>
					</el-form>
				</div>
				<div style="width: 100%;display: inline-block;">
					<div id="echarts" style="width: 100%;height: 250px;"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { listAsk, getAsk, personfindAll, todolist, check } from "@/api/zhmk/ask";
	import { listDevice } from "@/api/zhmk/device";
	import { listCarInfo } from "@/api/zhmk/carInfo";
	import { getInfo } from "@/api/login";
	import { carStatistics, personStatistics, personCarChart, openDoor } from "@/api/index";
	export default {
		name: "index",
		data() {
			return {
				loading: false,
				loading1: false,
				loading2: false,
				loading3: false,
				askList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				total: 0,
				askList2: [],
				queryParams2: {
					pageNum: 1,
					pageSize: 10,
				},
				total2: 0,
				// 人员状态字典
				userTypeOptions: [],
				// 请假状态字典
				statusOptions: [], // 车辆进出记录表格数据
				carInfoList: [],
				// 车辆类型字典
				carTypeOptions: [],
				// 进出类型字典
				inoutTypeOptions: [],
				// 查询参数
				queryParams1: {
					pageNum: 1,
					pageSize: 10,
				},
				total1: 0,
				form: {
					"dateTime": "",
					"type": '0',
				},
				form1: {},
				personlist: [],
				title: "",
				// 是否显示弹出层
				open: false,
				total3: 0,
				// 车牌设备表格数据
				deviceList: [],
				queryParams3: {
					pageNum: 1,
					pageSize: 10,
				},
				status: '',
				personnum: '',
				carnum: '',
				show: true,
			};
		},
		created() {
			if(new Date().getMonth()+1 > 9){
				this.form.dateTime = new Date().getFullYear() + '-' + new Date().getMonth()+1
			}else{
				this.form.dateTime = new Date().getFullYear() + '-' + '0' + (new Date().getMonth()+1)
			}
			
			this.getList();
			this.getList1();
			this.getList2();
			this.getList3();
			this.getnum();
			this.getechartsdata();
			this.getDicts("user_type").then(response => {
				this.userTypeOptions = response.data;
			});
			this.getDicts("ask_status").then(response => {
				this.statusOptions = response.data;
			});
			this.getDicts("car_type").then(response => {
				this.carTypeOptions = response.data;
			});
			this.getDicts("inout_type").then(response => {
				this.inoutTypeOptions = response.data;
			});
		},
		mounted() {
			personfindAll().then(response => {
				this.personlist = response.data;
			});
			this.timeout();
			// getInfo().then(response => {
			// 	console.log(response)
			// 	if(response.roles[0] == 'three'){
					
			// 	}
			// });
		},
		methods: {
			timeout(){
				var that = this;
				setTimeout(function() {
					that.getList();
					that.getList1();
					that.getList2();
					that.getList3();
					that.getnum();
					that.getechartsdata();
					that.timeout();
				}, 120000);
			},
			examine(row) {
				this.status = '';
				const id = row.id;
				if(row.roleCode == 'three'){
					this.show = false;
				}else{
					this.show = true;
				}
				getAsk(id).then(response => {
					this.form1 = response.data;
					this.open = true;
					this.title = "审核";
				});
			},
			submitForm() {
				if(this.status){
					check({
						id: this.form1.id,
						status: this.status,
						roleCode: this.form1.roleCode
					}).then(response => {
						this.msgSuccess("保存成功");
						this.open = false;
						this.getList2();
					});
				}else{
					this.$message({
						message: '请审核请假是否通过或移交',
						type: 'warning'
					});
				}
				
			},
			opendoor(row) {
				this.$confirm('是否确认开门?', "警告", {
				    confirmButtonText: "确定",
				    cancelButtonText: "取消",
				    type: "warning"
				  }).then(function() {
				    openDoor(row.id).then(response => {
							if(response.code == 200){
								this.msgSuccess("开门成功");
							}
						});
				  })
			},
			cancel() {
				this.open = false;
			},
			getList() {
				this.loading = true;
				listAsk(this.queryParams).then(response => {
					this.askList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			getList1() {
				this.loading1 = true;
				listCarInfo(this.queryParams1).then(response => {
					this.carInfoList = response.rows;
					this.total1 = response.total;
					this.loading1 = false;
				});
			},
			getList2() {
				this.loading2 = true;
				todolist(this.queryParams2).then(response => {
					this.askList2 = response.rows;
					this.total2 = response.total;
					this.loading2 = false;
					if(this.askList2.length > 0){
						this.$notify.info({
							title: '通知',
							message: '您有待办事项未处理，请尽快处理'
						});
					}
				});
			},
			getList3() {
				this.loading3 = true;
				listDevice(this.queryParams3).then(response => {
					this.deviceList = response.rows;
					this.total3 = response.total;
					this.loading3 = false;
				});
			},
			getnum() {
				carStatistics().then(response => {
					this.carnum = response.data;
				});
				personStatistics().then(response => {
					this.personnum = response.data;
				});
			},
			// 人员状态字典翻译
			userTypeFormat(row, column) {
				return this.selectDictLabel(this.userTypeOptions, row.userType);
			},
			// 请假状态字典翻译
			statusFormat(row, column) {
				return this.selectDictLabel(this.statusOptions, row.status);
			},
			// 车辆类型字典翻译
			carTypeFormat(row, column) {
				return this.selectDictLabel(this.carTypeOptions, row.carType);
			},
			// 进出类型字典翻译
			inoutTypeFormat(row, column) {
				return this.selectDictLabel(this.inoutTypeOptions, row.inoutType);
			},
			onSubmit() {
				this.getechartsdata()
			},
			getechartsdata(){
				personCarChart(this.form).then(response => {
					for(var i=0;i<response.data.personCarChartList.length;i++){
						response.data.personCarChartList[i].type = 'bar';
					}
					console.log(response.data)
					this.echarts(response.data)
				});
			},
			echarts(data) {
				var myChart = this.$echarts.init(document.getElementById('echarts'));
				let option = {
					color: ['#5470c6', '#91cc75'],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						right: 100,
						top: 10,
						data: data.nameList
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: data.dayCount
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, 1]
					},
					series: data.personCarChartList
				};
				myChart.setOption(option);
			},
		},
	};
</script>

<style scoped lang="scss">
	.home {
		background: #f5f7fa;

		.pending {
			height: 90px;

			img {
				margin-top: 15px;
				// margin-left: 10px;
				float: left;
				width: 65px;
			}

			.pendtext {
				display: inline-block;
				height: 100%;
				padding-left: 10px;

				p {
					margin: 10px;
				}

				h1 {
					margin: 10px;
				}

				.num {
					font-size: 33px;
					font-family: 'yjsz';
				}
			}
		}

		.el-table .el-table__header-wrapper th,
		.el-table .el-table__fixed-header-wrapper th {
			background-color: #ffffff !important;
		}

		.cartitle {
			height: 40px;
			line-height: 40px;
			background: #1296db;
			color: #fff;

			span {
				margin-left: 15px;
			}
		}
		.el-tooltip__popper{max-width: 150px;}
		.el-tooltip__popper,.el-tooltip__popper.is-dark{background:#f5f5f5 !important;
			color: #303133 !important;}
	}
</style>
